<template>
  <div class="project-detail">
    <div class="first-tab">
      <div class="backbtn" @click="backto()">返回项目列表</div>
      <div class="tablistbox">
        <a
          href="javascript:void(0);"
          :class="index == isactive ? 'active' : ''"
          @click="handelchange(index)"
          :key="index"
          v-for="(item, index) in tablist"
          >{{ item.name }}</a
        >
      </div>
      <survey :is="currentView" keep-alive></survey>
    </div>
  </div>
</template>

<script>
import calendar from './projectTab/detailTabs/calendar.vue';
import introduce from './projectTab/detailTabs/introduce.vue';
import survey from './projectTab/detailTabs/survey.vue';
import tasklist from './projectTab/detailTabs/tasklist.vue';
import teaching from './projectTab/detailTabs/teaching.vue';
import { getprodetail } from '@/api/project/prodetail';
export default {
  name: 'projectDetail',
  data() {
    return {
      isactive: this.$route.params.index ? this.$route.params.index : 0,
      tablist: [{ name: '项目概况' }, { name: '项目介绍' }, { name: '项目任务' }, { name: '项目日历' }, { name: '教学资料' }],
      currentView: this.$route.params.currentView ? this.$route.params.currentView : 'survey',
      userType: 0, // 储存用户在当前项目中的身份类型，是否为创建人或者负责人
      usertype: 0
    };
  },
  components: {
    calendar,
    introduce,
    survey,
    tasklist,
    teaching
  },
  created() {
    this.usertype = Number(sessionStorage.getItem('usertype'));
    // this.changeMenu();
    // 判断当前项目是否为模板项目，控制显示教学资料
    if (this.$route.params.projectLabel !== 1) {
      const res1 = this.tablist.filter(item => {
        return item.name !== '教学资料';
      });
      this.tablist = res1;
    }
  },
  methods: {
    handelchange(index) {
      this.isactive = index;
      if (index === 0) {
        this.currentView = 'survey';
      } else if (index === 1) {
        this.currentView = 'introduce';
      } else if (index === 2) {
        this.currentView = 'tasklist';
      } else if (index === 3) {
        this.currentView = 'calendar';
      } else if (index === 4) {
        this.currentView = 'teaching';
      }
    },
    // 根据用户的身份类型显示对应的菜单
    async changeMenu() {
      // console.log(111);
      const res = await getprodetail(Number(localStorage.getItem('projectId')), Number(sessionStorage.getItem('usertype')));
      console.log(res);
      if (res.code === 200) {
        // 判断是否为创建人或者负责人
        if (res.data.managerList.length > 0) {
          res.data.managerList.forEach(item => {
            if (item.id === Number(sessionStorage.getItem('userid'))) {
              console.log('负责人');
              this.userType = 1;
            }
          });
        }
        if (res.data.createList.length > 0) {
          res.data.createList.forEach(item => {
            if (item.id === Number(sessionStorage.getItem('userid'))) {
              console.log('创建人');
              this.userType = 1;
            }
          });
        }
        // 判断项目类型
        if (res.data.label === 2 || res.data.label === 3) {
          // 判断用户的身份类型
          if (this.userType === 1 || this.usertype === 1) { // 是当前项目的创建人或者负责人，即可访问全部菜单
            this.tablist = [{ name: '项目概况' }, { name: '项目介绍' }, { name: '项目任务' }, { name: '项目日历' }, { name: '教学资料' }];
          } else { // 是当前项目的成员
            this.tablist = [{ name: '项目概况' }, { name: '项目介绍' }];
          }
        } else {
          // 管理员可见
          this.tablist = [{ name: '项目概况' }, { name: '项目介绍' }, { name: '项目任务' }, { name: '项目日历' }, { name: '教学资料' }];
          console.log('模板项目，仅管理员可见');
        }
      }
    },
    backto() {
      this.$router.replace('/project');
    }
  }
};
</script>

<style lang="less" scoped>
.project-detail {
  padding-bottom: 20px;
}
.first-tab {
  margin: 0 20px;
  position: relative;
  .tablistbox {
    margin-top: 20px;
  }
  .backbtn {
    position: absolute;
    right: 0;
    top: 20px;
    color: #555;
    font-size: 16px;
    cursor: pointer;
  }
  a {
    color: #555;
    width: 138px;
    height: 45px;
    border: 1px solid #ececec;
    line-height: 45px;
    font-size: 14px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #ececec;
    display: inline-block;
    box-shadow: 0px 0px 1px 0px #99999980;
  }
  .active {
    position: relative;
    width: 138px;
    height: 55px;
    color: #333;
    line-height: 55px;
    font-size: 16px;
    border-radius: 8px 8px 0px 0px;
    border-bottom: none;
    box-shadow: 1px -2px 3px 0px #99999980;
  }
}
</style>
